<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 01 天 —— 基础选择器 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/9.26864b79.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" aria-current="page" class="active sidebar-link">CSS 第 01 天 —— 基础选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#能力目标" class="sidebar-link">能力目标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#css-层叠样式表导读-一-01-08" class="sidebar-link">CSS 层叠样式表导读（一 ~ 01'08'')</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_1-基础认知" class="sidebar-link">1. 基础认知</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_1-1-css-简介-一-05-09" class="sidebar-link">1.1 CSS 简介（一 ~ 05'09''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_1-2☆-体验-css-语法规范-一-07-13" class="sidebar-link">1.2☆ 体验 CSS 语法规范（一 ~ 07'13''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_1-3-css-代码风格-一-04-42" class="sidebar-link">1.3 CSS 代码风格（一 ~ 04'42''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2☆-选择器" class="sidebar-link">2☆. 选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-1-css-选择器的作用-一-03-29" class="sidebar-link">2.1 CSS 选择器的作用（一 ~ 03'29''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-2-标签选择器-一-06-01" class="sidebar-link">2.2 标签选择器（一 ~ 06'01''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-3-类选择器-二-10-30" class="sidebar-link">2.3 类选择器（二 ~ 10'30''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-4-使用类选择器画盒子-案例-二-05-21" class="sidebar-link">2.4 使用类选择器画盒子 - 案例（二 ~ 05'21''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-5-类选择器特殊使用-多类名-二-08-02" class="sidebar-link">2.5 类选择器特殊使用-多类名（二 ~ 08'02''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-6-id-选择器-二-06-19" class="sidebar-link">2.6 id 选择器（二 ~ 06'19''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_2-7-通配符选择器-三-05-09" class="sidebar-link">2.7 通配符选择器（三 ~ 05'09''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-字体属性" class="sidebar-link">3. 字体属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-1-font-family-设置字体系列-三-07-35" class="sidebar-link">3.1 font-family 设置字体系列（三 ~ 07'35''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-2☆-font-size-字号大小-三-04-01" class="sidebar-link">3.2☆ font-size 字号大小（三 ~ 04'01''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-3☆-font-weight-字体粗细-三-08-07" class="sidebar-link">3.3☆ font-weight 字体粗细（三 ~ 08'07''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-4-font-style-字体样式-三-03-08" class="sidebar-link">3.4 font-style 字体样式（三 ~ 03'08''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-5-font-复合属性写法-四-08-38" class="sidebar-link">3.5 font 复合属性写法（四 ~ 08'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_3-6-字体属性总结-四-03-03" class="sidebar-link">3.6 字体属性总结（四 ~ 03'03''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4☆-文本属性" class="sidebar-link">4☆. 文本属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-1-文本颜色-color-四-05-55" class="sidebar-link">4.1 文本颜色 color（四 ~ 05'55''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-2-文本对齐-text-align-四-03-05" class="sidebar-link">4.2 文本对齐 text-align（四 ~ 03'05''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-3-文本装饰-text-decoration-四-05-04" class="sidebar-link">4.3 文本装饰 text-decoration（四 ~ 05'04''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-4-文本缩进-text-indent-四-05-27" class="sidebar-link">4.4 文本缩进 text-indent（四 ~ 05'27''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-5-行间距-line-height-五-08-10" class="sidebar-link">4.5 行间距 line-height（五 ~ 08'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_4-6-css-文本属性总结-五-02-58" class="sidebar-link">4.6 CSS 文本属性总结（五 ~ 02'58''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_5☆-css-的三种引入方式-认知类" class="sidebar-link">5☆. CSS 的三种引入方式（认知类）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_5-1-内部样式表-五-04-25" class="sidebar-link">5.1 内部样式表（五 ~ 04'25''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_5-2-行内样式表-五-04-04" class="sidebar-link">5.2 行内样式表（五 ~ 04'04''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_5-3-外部样式表-五-05-08" class="sidebar-link">5.3 外部样式表（五 ~ 05'08''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_5-4-css-引入方式总结-五-02-12" class="sidebar-link">5.4 CSS 引入方式总结（五 ~ 02'12''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_6-综合案例" class="sidebar-link">6. 综合案例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_6-1-chrome-调试工具-五-02-12" class="sidebar-link">6.1 Chrome 调试工具（五 ~ 02'12''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_6-2-综合案例素材" class="sidebar-link">6.2 综合案例素材</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_6-2-综合案例要求" class="sidebar-link">6.2 综合案例要求</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_6-3-综合案例思考" class="sidebar-link">6.3 综合案例思考</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#_7-附录" class="sidebar-link">7. 附录</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day01.html#类命名规则" class="sidebar-link">类命名规则</a></li></ul></li></ul></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-01-天-基础选择器"><a href="#css-第-01-天-基础选择器" class="header-anchor">#</a> CSS 第 01 天 —— 基础选择器</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够使用<strong>基础选择器</strong>选中自己希望修改的元素，修改样式之前必须先要能够找到它；</li> <li>能够使用<strong>字体和文本样式</strong>修改外观，包括：字体、字号、颜色等；</li> <li>能够知道 CSS 的<strong>引用方式</strong>及区别；</li> <li>能够知道 Chrome 调试工具的基本使用，后续会反复练习以提高 CSS 调试技能。</li></ol> <h3 id="css-层叠样式表导读-一-01-08"><a href="#css-层叠样式表导读-一-01-08" class="header-anchor">#</a> CSS 层叠样式表导读（一 ~ 01'08'')</h3> <blockquote><p>过渡视频，介绍第 01 天的学习路径：</p></blockquote> <ol><li>CSS 基础认知</li> <li>基础选择器</li> <li>字体和文本样式</li> <li>三种 CSS 的导入方式</li> <li>Chrome 调试工具</li></ol> <h2 id="_1-基础认知"><a href="#_1-基础认知" class="header-anchor">#</a> 1. 基础认知</h2> <h3 id="_1-1-css-简介-一-05-09"><a href="#_1-1-css-简介-一-05-09" class="header-anchor">#</a> 1.1 CSS 简介（一 ~ 05'09''）</h3> <h4 id="_1-1-1-「css-简介」问题"><a href="#_1-1-1-「css-简介」问题" class="header-anchor">#</a> 1.1.1 「CSS 简介」问题</h4> <ul><li>问题 1：CSS 的使用场景是什么？</li> <li>问题 2：CSS 的中文名称是什么？</li> <li>问题 3：CSS 能设置哪些样式？</li></ul> <h4 id="_1-1-2-「css-简介」答案"><a href="#_1-1-2-「css-简介」答案" class="header-anchor">#</a> 1.1.2 「CSS 简介」答案</h4> <ul><li><p>问题 1：CSS 的使用场景是什么？</p> <ul><li>美化网页，布局页面</li></ul></li> <li><p>问题 2：CSS 的中文名称是什么？</p> <ul><li><strong>层叠/级联</strong>样式表（Cascading Style Sheets）</li> <li>CSS 也是一种标记语言</li></ul></li> <li><p>问题 3：CSS 能设置哪些样式？</p> <ul><li>文本内容：字体、大小、对齐方式</li> <li>图片：宽高、边框、边距</li> <li>版面的布局</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>结构与样式分离</strong>：HTML 专注做结构 + CSS 专注做样式</p></div> <h3 id="_1-2☆-体验-css-语法规范-一-07-13"><a href="#_1-2☆-体验-css-语法规范-一-07-13" class="header-anchor">#</a> 1.2☆ 体验 CSS 语法规范（一 ~ 07'13''）</h3> <h4 id="_1-2-1-「体验-css-语法规范」问题"><a href="#_1-2-1-「体验-css-语法规范」问题" class="header-anchor">#</a> 1.2.1 「体验 CSS 语法规范」问题</h4> <ul><li>问题 1：CSS 规则包含哪两个部分，作用是什么？</li> <li>问题 2：CSS 通常写在 HTML 的什么位置？</li> <li>问题 3：CSS 语法格式是什么？</li></ul> <h4 id="_1-2-2-「体验-css-语法规范」答案"><a href="#_1-2-2-「体验-css-语法规范」答案" class="header-anchor">#</a> 1.2.2 「体验 CSS 语法规范」答案</h4> <ul><li><p>问题 1：CSS 规则包含哪两个部分，作用是什么？</p> <ul><li>选择器：改谁的样式</li> <li>样式声明：改成什么样式</li></ul></li> <li><p>问题 2：CSS 通常写在 HTML 的什么位置？</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>体验CSS语法规范<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    CSS 写在这里
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>问题 3：CSS 语法格式是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">选择器</span> <span class="token punctuation">{</span>
  <span class="token property">属性</span><span class="token punctuation">:</span> 值<span class="token punctuation">;</span>
  <span class="token property">属性</span><span class="token punctuation">:</span> 值<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用 <code>{}</code> 包含一个或多个样式声明；</li> <li>每条样式声明以<strong>键值对</strong>形式出现：<code>属性: 值</code>；</li> <li>属性和值之间使用 <code>:</code> 分隔；</li> <li>属性之间使用 <code>;</code> 分隔，最后一行的分号可以省略。</li></ul></li></ul> <h4 id="_1-2-3-「体验-css-语法规范」练习-02-00"><a href="#_1-2-3-「体验-css-语法规范」练习-02-00" class="header-anchor">#</a> 1.2.3 「体验 CSS 语法规范」练习（02'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：体验 CSS</p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>01-体验CSS语法规范.html</code>；</li> <li>使用 p 标签增加一段文字；</li> <li>使用 <code>color</code> 属性修改文字颜色，使用 <code>font-size</code> 属性修改文字大小。</li></ol></li> <li><p>参考代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">p</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ol><li>在 HTML 中写样式不要忘记加 style 标签</li> <li>设置字体不要忘记 <code>px</code>，提示可以把字体设置大一些，这样更直观。</li></ol></div></li></ol> <h3 id="_1-3-css-代码风格-一-04-42"><a href="#_1-3-css-代码风格-一-04-42" class="header-anchor">#</a> 1.3 CSS 代码风格（一 ~ 04'42''）</h3> <h4 id="_1-3-1-「css-代码风格」问题"><a href="#_1-3-1-「css-代码风格」问题" class="header-anchor">#</a> 1.3.1 「CSS 代码风格」问题</h4> <ul><li>问题 1：紧凑格式和展开格式哪种更推荐？为什么？</li> <li>问题 2：书写样式时，应该使用大写字母还是小写字母？</li> <li>问题 3：书写样式时，有两个地方需要注意空格，分别是什么位置？</li></ul> <h4 id="_1-3-2-「css-代码风格」答案"><a href="#_1-3-2-「css-代码风格」答案" class="header-anchor">#</a> 1.3.2 「CSS 代码风格」答案</h4> <ul><li><p>问题 1：紧凑格式和展开格式哪种更推荐？为什么？</p> <ul><li>更推荐<strong>展开格式</strong>，因为更直观，更易于阅读和维护。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>后续会有专门的工具对 CSS 进行压缩</p> <ul><li>开发时展开给人看，更友好</li> <li>上线时压缩给浏览器看，更高效</li></ul></div></li> <li><p>问题 2：书写样式时，应该使用大写字母还是小写字母？</p> <ul><li>小写字母。</li></ul></li> <li><p>问题 3：书写样式时，有两个地方需要注意空格，分别是什么位置？</p> <ol><li><strong>选择器</strong>和<strong>开始花括号</strong>之间保留一个空格；</li> <li><code>:</code> 后面保留一个空格。</li></ol></li></ul> <h2 id="_2☆-选择器"><a href="#_2☆-选择器" class="header-anchor">#</a> 2☆. 选择器</h2> <h3 id="_2-1-css-选择器的作用-一-03-29"><a href="#_2-1-css-选择器的作用-一-03-29" class="header-anchor">#</a> 2.1 CSS 选择器的作用（一 ~ 03'29''）</h3> <h4 id="_2-1-1-「css-选择器的作用」问题"><a href="#_2-1-1-「css-选择器的作用」问题" class="header-anchor">#</a> 2.1.1 「CSS 选择器的作用」问题</h4> <ul><li>问题 1：选择器的作用是什么？</li></ul> <h4 id="_2-1-2-「css-选择器的作用」答案"><a href="#_2-1-2-「css-选择器的作用」答案" class="header-anchor">#</a> 2.1.2 「CSS 选择器的作用」答案</h4> <ul><li><p>问题 1：选择器的作用是什么？</p> <ul><li>选择标签 —— 根据<strong>不同的需求</strong>，把<strong>对应的标签</strong>选择出来。</li></ul></li></ul> <h3 id="_2-2-标签选择器-一-06-01"><a href="#_2-2-标签选择器-一-06-01" class="header-anchor">#</a> 2.2 标签选择器（一 ~ 06'01''）</h3> <h4 id="_2-2-1-「标签选择器」问题"><a href="#_2-2-1-「标签选择器」问题" class="header-anchor">#</a> 2.2.1 「标签选择器」问题</h4> <ul><li>问题 1：选择器分为哪两大类？特征是什么？</li> <li>问题 2：标签选择器是以什么作为选择器？</li> <li>问题 3：使用标签选择器修改样式的结果是什么？有什么优点？有什么缺点？</li></ul> <h4 id="_2-2-2-「标签选择器」答案"><a href="#_2-2-2-「标签选择器」答案" class="header-anchor">#</a> 2.2.2 「标签选择器」答案</h4> <ul><li><p>问题 1：选择器分为哪两大类？特征是什么？</p> <ul><li>基础选择器：由单个选择器组成（今天学习）
<ul><li>标签、类、id、通配符</li></ul></li> <li>复合选择器：由多个选择器组成（明天学习）</li></ul></li> <li><p>问题 2：标签选择器是以什么作为选择器？</p> <ul><li>标签选择器就是使用 <strong>HTML 标签名称</strong>作为选择器</li></ul></li> <li><p>问题 3：使用标签选择器修改样式的结果是什么？有什么优点？有什么缺点？</p> <ul><li>结果：把某一类标签选择出来，统一修改样式</li> <li>优点：快速、统一设置同类型标签的样式</li> <li>缺点：没有差异化</li></ul></li></ul> <h4 id="_2-2-3-「标签选择器」练习-05-00"><a href="#_2-2-3-「标签选择器」练习-05-00" class="header-anchor">#</a> 2.2.3 「标签选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>标签选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>02-标签选择器.html</code>；</li> <li>使用 <code>color</code> 和 <code>font-size</code> 分别修改素材代码中的 <code>h3</code> 和 <code>li</code> 标签中的颜色和文字大小；</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>任职要求<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>对 Vue 前端框架有深入应用并深入理解其设计原理；<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>精通 HTML、CSS 技术，有页面制作（切图）经验；<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>精通 JavaScript、TypeScript 编程，有丰富的程序开发经验；<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>
    有移动端 Web 开发或微信小程序开发经验，能独立开发，并进行性能优化；
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>熟悉前端工程化开发，精通 webpack 配置。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>思考 —— 在实际的开发中，同一类标签会拥有相同的样式吗？例如所有 <code>p</code> 标签？为什么？</p></div> <h3 id="_2-3-类选择器-二-10-30"><a href="#_2-3-类选择器-二-10-30" class="header-anchor">#</a> 2.3 类选择器（二 ~ 10'30''）</h3> <h4 id="_2-3-1-「类选择器」问题"><a href="#_2-3-1-「类选择器」问题" class="header-anchor">#</a> 2.3.1 「类选择器」问题</h4> <ul><li>问题 1：类选择器的应用场景是什么？</li> <li>问题 2：类选择器的语法是什么？使用步骤是什么？注意事项是什么？</li> <li>问题 3：类选择器可以应用到不同类型的标签吗？</li> <li>问题 4：给类选择器命名有注意事项？</li></ul> <h4 id="_2-3-2-「类选择器」答案"><a href="#_2-3-2-「类选择器」答案" class="header-anchor">#</a> 2.3.2 「类选择器」答案</h4> <ul><li><p>问题 1：类选择器的应用场景是什么？</p> <ul><li>如果想<strong>差异化选择</strong>不同的标签，<strong>单独选择一个或某几个</strong>标签</li></ul></li> <li><p>问题 2：类选择器的语法是什么？使用步骤是什么？注意事项是什么？</p> <ol><li>定义类选择器
<ol><li>选择器名称前有一个 <code>.</code> 表示是类选择器</li> <li><code>{}</code> 中仍然是一个或多个键值对；</li></ol></li> <li>使用类选择器
<ol><li>找到需要修改样式的标签；</li> <li>给标签增加 <code>class</code> 属性，属性值是选择器的类名</li></ol></li> <li>注意事项
<ol><li>使用类选择器不需要 <code>.</code>！</li> <li>使用类选择器不需要 <code>.</code>！</li> <li>使用类选择器不需要 <code>.</code>！</li></ol></li></ol></li> <li><p>问题 3：类选择器可以应用到不同类型的标签吗？</p> <ul><li>可以</li></ul></li> <li><p>问题 4：给类选择器命名有注意事项？</p> <ul><li><code>.</code> 紧跟类名，不能有空格；</li> <li>长名称或词组使用 <code>-</code> 连接，例如：<code>jd-nav</code>；</li> <li>尽量用英文，不要用数字或中文；</li> <li>命名要做到<strong>见名知意</strong>；</li> <li><a href="#%E7%B1%BB%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99">类命名规则</a></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>类选择器口诀</p> <ol><li>样式点定义</li> <li>结构类调用</li> <li>一个或多个</li> <li>开发最常用</li></ol></div> <h4 id="_2-3-3-「类选择器」练习-05-00"><a href="#_2-3-3-「类选择器」练习-05-00" class="header-anchor">#</a> 2.3.3 「类选择器」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>类选择器</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>03-类选择器.html</code>；</li> <li>定义 <code>hot</code> 类表示热销书籍类；</li> <li>使用 <code>color</code> 和 <code>font-size</code> 定义<strong>热销数据</strong>的颜色和文字大小；</li> <li>在素材代码中应用类选择器突入显示热销书籍。</li></ol></li> <li><p>素材代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>HTML 入门到精通<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>CSS 布局指南<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>JavaScript 从入门到放弃<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_2-4-使用类选择器画盒子-案例-二-05-21"><a href="#_2-4-使用类选择器画盒子-案例-二-05-21" class="header-anchor">#</a> 2.4 使用类选择器画盒子 - 案例（二 ~ 05'21''）</h3> <h4 id="_2-4-1-「使用类选择器画盒子」练习-05-00"><a href="#_2-4-1-「使用类选择器画盒子」练习-05-00" class="header-anchor">#</a> 2.4.1 「使用类选择器画盒子」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习<strong>类选择器</strong></li> <li>练习步骤：
<ol><li>新建文件 <code>04-使用类选择器画盒子.html</code>；</li> <li>准备三个 <code>div</code> 盒子，分别包含文字：红色、绿色、红色；</li> <li>定义两个类：<code>red</code> 和 <code>green</code>，定义盒子宽度、高度和背景颜色；</li> <li>应用类控制盒子的显示</li></ol></li> <li>参考单词：
<ol><li><code>width</code>、<code>height</code>、<code>background-color</code>；</li> <li><code>red</code>、<code>green</code>。</li></ol></li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>思考：为什么视频中，设置了两个红色的盒子的样式之后会连在一起，说好的绿盒子呢？</p> <p>答案：div 默认占一整行，但是如果没有指定宽度和高度，那么，</p> <ul><li>宽度是浏览器的宽度</li> <li>高度是 0</li></ul> <p>所以看不见。</p></div> <h3 id="_2-5-类选择器特殊使用-多类名-二-08-02"><a href="#_2-5-类选择器特殊使用-多类名-二-08-02" class="header-anchor">#</a> 2.5 类选择器特殊使用-多类名（二 ~ 08'02''）</h3> <h4 id="_2-5-1-「类选择器特殊使用-多类名」问题"><a href="#_2-5-1-「类选择器特殊使用-多类名」问题" class="header-anchor">#</a> 2.5.1 「类选择器特殊使用-多类名」问题</h4> <ul><li>问题 1：多类名的使用方式是什么？</li> <li>问题 2：多类名的应用场景是什么？</li></ul> <h4 id="_2-5-2-「类选择器特殊使用-多类名」答案"><a href="#_2-5-2-「类选择器特殊使用-多类名」答案" class="header-anchor">#</a> 2.5.2 「类选择器特殊使用-多类名」答案</h4> <ul><li><p>问题 1：多类名的使用方式是什么？</p> <ul><li>在标签的 <code>class</code> 属性中使用多个类名</li> <li>类名之间使用空格分隔</li></ul></li> <li><p>问题 2：多类名的应用场景是什么？</p> <ul><li>把元素相同的样式放在同一个公共类中，个性的样式放在单独的类中，既可以节省 CSS 代码，又方便统一修改。</li></ul></li></ul> <h4 id="_2-5-3-「类选择器特殊使用-多类名」练习-05-00"><a href="#_2-5-3-「类选择器特殊使用-多类名」练习-05-00" class="header-anchor">#</a> 2.5.3 「类选择器特殊使用-多类名」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习<strong>多类名选择器</strong>，使用<strong>多类名</strong>优化 <code>04-使用类选择器画盒子.html</code> 的代码。</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>初学 CSS 强烈<strong>不建议为了优化代码而优化代码</strong>，先模仿老师的写法，在不断的练习中强化对 CSS 的理解。</p></div> <h3 id="_2-6-id-选择器-二-06-19"><a href="#_2-6-id-选择器-二-06-19" class="header-anchor">#</a> 2.6 id 选择器（二 ~ 06'19''）</h3> <h4 id="_2-6-1-「id-选择器」问题"><a href="#_2-6-1-「id-选择器」问题" class="header-anchor">#</a> 2.6.1 「id 选择器」问题</h4> <ul><li>问题 1：id 选择器的前缀是什么？</li> <li>问题 2：id 选择器的应用场景是什么？</li> <li>问题 3：id 选择器的使用步骤？</li> <li>问题 4：id 选择器和类选择器的区别？</li></ul> <h4 id="_2-6-2-「id-选择器」答案"><a href="#_2-6-2-「id-选择器」答案" class="header-anchor">#</a> 2.6.2 「id 选择器」答案</h4> <ul><li><p>问题 1：id 选择器的前缀是什么？</p> <ul><li><code>#</code></li></ul></li> <li><p>问题 2：id 选择器的应用场景是什么？</p> <ul><li>专门定义 HTML 中某个特定元素的样式，因为 <code>id</code> 是唯一的</li></ul></li> <li><p>问题 3：id 选择器的使用步骤？</p> <ol><li>定义带 id 的 HTML 元素
<ol><li>给 HTML 中的某个特殊元素增加 <code>id</code> 属性</li></ol></li> <li>定义 id 选择器
<ol><li>选择器名称前有一个 <code>#</code> 表示是 id 选择器</li> <li>选择器名称就是对应 HTML 元素的 id 名称</li> <li><code>{}</code> 中仍然是一个或多个键值对；</li></ol></li></ol></li> <li><p>问题 4：id 选择器和类选择器的区别？</p> <ol><li>id 可以看成是<strong>身份证号</strong>（唯一） / 类可以看成是<strong>名字</strong>（可多人使用）</li> <li>id 只为特定元素设置样式，常与 JavaScript 联用</li> <li>类选择器在修改样式中用的最多</li></ol></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>id 选择器口诀</p> <ol><li>样式 <code>#</code> 定义</li> <li>结构 <code>id</code> 调用</li> <li>只能用一次</li> <li>别人勿使用</li></ol></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果在 HTML 中给多个元素设置相同的 <code>id</code> 值，id 选择器是可以同时修改这些元素的样式的，但是作为前端工程师，在开发中一定不要这么做！</p></div> <h3 id="_2-7-通配符选择器-三-05-09"><a href="#_2-7-通配符选择器-三-05-09" class="header-anchor">#</a> 2.7 通配符选择器（三 ~ 05'09''）</h3> <h4 id="_2-7-1-「通配符选择器」问题"><a href="#_2-7-1-「通配符选择器」问题" class="header-anchor">#</a> 2.7.1 「通配符选择器」问题</h4> <ul><li>问题 1：通配符选择器使用什么符号定义？表示什么含义？</li> <li>问题 2：通配符选择器需要调用吗？为什么？</li></ul> <h4 id="_2-7-2-「通配符选择器」答案"><a href="#_2-7-2-「通配符选择器」答案" class="header-anchor">#</a> 2.7.2 「通配符选择器」答案</h4> <ul><li><p>问题 1：通配符选择器使用什么符号定义？</p> <ul><li><code>*</code></li> <li>表示选取页面中的所有元素</li></ul></li> <li><p>问题 2：通配符选择器需要调用吗？为什么？</p> <ul><li>不需要</li> <li>浏览器在解释 HTML 时，会把通配符选择器中定义的样式应用到页面中的每一个元素</li></ul></li></ul> <h5 id="基础选择器总结"><a href="#基础选择器总结" class="header-anchor">#</a> 基础选择器总结</h5> <table><thead><tr><th>基础选择器</th> <th>作用</th> <th>特点</th> <th>使用频率</th></tr></thead> <tbody><tr><td>标签选择器</td> <td>选出相同标签</td> <td>不能差异化选择</td> <td>较多</td></tr> <tr><td>类选择器(<code>.</code>)</td> <td>按需选择标签</td> <td>根据需求选择</td> <td><strong>非常多</strong></td></tr> <tr><td>id 选择器(<code>#</code>)</td> <td>选中唯一标签</td> <td>针对唯一标签</td> <td>通常与 JavaScript 联用</td></tr> <tr><td>通配符选择器(<code>*</code>)</td> <td>选中所有标签</td> <td>选择的太多，有部分不需要</td> <td>特殊情况使用</td></tr></tbody></table> <h2 id="_3-字体属性"><a href="#_3-字体属性" class="header-anchor">#</a> 3. 字体属性</h2> <h3 id="_3-1-font-family-设置字体系列-三-07-35"><a href="#_3-1-font-family-设置字体系列-三-07-35" class="header-anchor">#</a> 3.1 font-family 设置字体系列（三 ~ 07'35''）</h3> <h4 id="_3-1-1-「font-family-设置字体系列」问题"><a href="#_3-1-1-「font-family-设置字体系列」问题" class="header-anchor">#</a> 3.1.1 「font-family 设置字体系列」问题</h4> <ul><li>问题 1：字体属性可以定义哪些样式？</li> <li>问题 2：<code>font-family</code> 的含义是什么？</li> <li>问题 3：为什么要尽量使用系统默认自带字体？</li> <li>问题 4：浏览器对字体的搜索顺序是什么？</li> <li>问题 5：为什么要把字体样式设置给 <code>body</code> 标签？</li></ul> <h4 id="_3-1-2-「font-family-设置字体系列」答案"><a href="#_3-1-2-「font-family-设置字体系列」答案" class="header-anchor">#</a> 3.1.2 「font-family 设置字体系列」答案</h4> <ul><li><p>问题 1：字体属性可以定义哪些样式？</p> <ul><li><strong>字体相关的样式</strong>，例如：<strong>字体系列</strong>、<strong>大小</strong>、<strong>粗细</strong>、<strong>文字样式</strong>（斜体）等</li></ul></li> <li><p>问题 2：<code>font-family</code> 的含义是什么？</p> <ul><li>字体系列、字体族</li></ul></li> <li><p>问题 3：为什么要尽量使用系统默认自带字体？</p> <ul><li>保证在任何用户的浏览中都能正确显示</li></ul></li> <li><p>问题 4：浏览器对字体的搜索顺序是什么？</p> <ul><li>当指定的字体找不到（或者某些文字不支持这个字体）时，就接着往后找</li></ul></li> <li><p>问题 5：为什么要把字体样式设置给 <code>body</code> 标签？</p> <ul><li>一次设置，到处使用</li></ul></li></ul> <h4 id="_3-1-3-「font-family-设置字体系列」扩展-字体族-05-00"><a href="#_3-1-3-「font-family-设置字体系列」扩展-字体族-05-00" class="header-anchor">#</a> 3.1.3 「font-family 设置字体系列」扩展 —— 字体族（05'00'')</h4> <ul><li>衬线字体 <code>serif</code>，如：宋体，Times New Roman</li> <li>非衬线字体 <code>sans-serif</code>，如：微软雅黑，苹方，Arial</li> <li>等宽字体 <code>monospace</code>，如：Courier，Courier New，Monospace，新宋体，幼圆</li> <li>手写体 <code>cursive</code></li> <li>花体 <code>fantasy</code></li></ul> <blockquote><p>提示：衬线体如今已经很少使用了，而非衬线体更符合现代审美。如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。</p></blockquote> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>写 CSS 代码时，末尾的<strong>字体族不需要带引号</strong>；</li> <li>Windows 推荐使用<strong>微软雅黑</strong>字体；</li> <li>macOS 推荐使用<strong>苹方</strong>字体。</li></ul></div> <h3 id="_3-2☆-font-size-字号大小-三-04-01"><a href="#_3-2☆-font-size-字号大小-三-04-01" class="header-anchor">#</a> 3.2☆ font-size 字号大小（三 ~ 04'01''）</h3> <h4 id="_3-2-1-「font-size-字号大小」问题"><a href="#_3-2-1-「font-size-字号大小」问题" class="header-anchor">#</a> 3.2.1 「font-size 字号大小」问题</h4> <ul><li>问题 1：设置字体大小的单位是什么？</li> <li>问题 2：谷歌浏览器的默认文字大小是多少？</li> <li>问题 3：为什么要在 <code>body</code> 标签中指定页面文字的大小？</li></ul> <h4 id="_3-2-2-「font-size-字号大小」答案"><a href="#_3-2-2-「font-size-字号大小」答案" class="header-anchor">#</a> 3.2.2 「font-size 字号大小」答案</h4> <ul><li><p>问题 1：设置字体大小的单位是什么？</p> <ul><li><code>px</code> 像素</li></ul></li> <li><p>问题 2：谷歌浏览器的默认文字大小是多少？</p> <ul><li><code>16px</code></li></ul></li> <li><p>问题 3：为什么要在 <code>body</code> 标签中指定页面文字的大小？</p> <ul><li>不同浏览器可能默认显示的文字大小不一致</li> <li>开发时要尽量给一个明确的值，不要使用默认大小</li></ul></li></ul> <h4 id="_3-2-3-「font-size-字号大小」扩展-检查文字大小-05-00"><a href="#_3-2-3-「font-size-字号大小」扩展-检查文字大小-05-00" class="header-anchor">#</a> 3.2.3 「font-size 字号大小」扩展 —— 检查文字大小（05'00'')</h4> <ol><li><p>确认谷歌浏览器的默认文字大小</p> <p><img src="/basenode/assets/img/chrome-check-font-size.8fa23808.png" alt="检查文字大小"></p></li> <li><p>设置尺寸漏写 <code>px</code> <img src="/basenode/assets/img/chrome-invalid-property-value.f8570205.png" alt="漏写px"></p></li></ol> <h3 id="_3-3☆-font-weight-字体粗细-三-08-07"><a href="#_3-3☆-font-weight-字体粗细-三-08-07" class="header-anchor">#</a> 3.3☆ font-weight 字体粗细（三 ~ 08'07''）</h3> <h4 id="_3-3-1-「font-weight-字体粗细」问题"><a href="#_3-3-1-「font-weight-字体粗细」问题" class="header-anchor">#</a> 3.3.1 「font-weight 字体粗细」问题</h4> <ul><li>问题 1：实际开发中推荐使用哪种方式设置字体的粗细？</li> <li>问题 2：使用数值设置字体粗细需要单位吗？</li> <li>问题 3：哪些数值可以设置字体的粗细？<code>normal</code> 对应多少？<code>bold</code> 对应多少？</li></ul> <h4 id="_3-3-2-「font-weight-字体粗细」答案"><a href="#_3-3-2-「font-weight-字体粗细」答案" class="header-anchor">#</a> 3.3.2 「font-weight 字体粗细」答案</h4> <ul><li><p>问题 1：实际开发中推荐使用哪种方式设置字体的粗细？</p> <ul><li>数字</li> <li><code>font-weight</code> 字重</li></ul></li> <li><p>问题 2：使用数值设置字体粗细需要单位吗？</p> <ul><li><strong>不需要</strong></li></ul></li> <li><p>问题 3：哪些数值可以设置字体的粗细？<code>normal</code> 对应多少？<code>bold</code> 对应多少？</p> <ul><li>取值范围 <code>100</code> ~ <code>900</code>（按 <code>100</code> 递增）</li> <li><code>normal</code>：正常粗细，与 400 等值。</li> <li><code>bold</code>：加粗，与 700 等值。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>不是所有的字体都提供了九种粗细的，因此有些数值指定后会看不出变化。</p></div> <h3 id="_3-4-font-style-字体样式-三-03-08"><a href="#_3-4-font-style-字体样式-三-03-08" class="header-anchor">#</a> 3.4 font-style 字体样式（三 ~ 03'08''）</h3> <h4 id="_3-4-1-「font-style-字体样式」问题"><a href="#_3-4-1-「font-style-字体样式」问题" class="header-anchor">#</a> 3.4.1 「font-style 字体样式」问题</h4> <ul><li>问题 1：开发时把字体设置为倾斜的场景多吗？为什么？</li> <li>问题 2：font-style 的应用场景是什么？</li></ul> <h4 id="_3-4-2-「font-style-字体样式」答案"><a href="#_3-4-2-「font-style-字体样式」答案" class="header-anchor">#</a> 3.4.2 「font-style 字体样式」答案</h4> <ul><li><p>问题 1：开发时把字体设置为倾斜的场景多吗？为什么？</p> <ul><li>不多</li> <li><code>font-style: italic;</code></li></ul></li> <li><p>问题 2：font-style 的应用场景是什么？</p> <ul><li>把 <code>em</code>、<code>i</code> 默认的斜体改为不倾斜显示 <code>font-style: normal;</code></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>开发时，如果需要对段落中的局部文字进行修饰，例如搜索结果高亮，可以首选 <code>em</code> 标签，然后应用 <code>font-style</code> 首先将字体设置为不倾斜。</p></div> <h3 id="_3-5-font-复合属性写法-四-08-38"><a href="#_3-5-font-复合属性写法-四-08-38" class="header-anchor">#</a> 3.5 font 复合属性写法（四 ~ 08'38''）</h3> <h4 id="_3-5-1-「font-复合属性写法」问题"><a href="#_3-5-1-「font-复合属性写法」问题" class="header-anchor">#</a> 3.5.1 「font 复合属性写法」问题</h4> <ul><li>问题 1：字体复合属性的属性名是什么？</li> <li>问题 2：复合属性的作用是什么？</li> <li>问题 3：复合属性的编写顺序是什么？能够随意调整顺序吗？</li> <li>问题 4：猜一猜在开发中字体的复合属性使用频率高吗？为什么？</li></ul> <h4 id="_3-5-2-「font-复合属性写法」答案"><a href="#_3-5-2-「font-复合属性写法」答案" class="header-anchor">#</a> 3.5.2 「font 复合属性写法」答案</h4> <ul><li><p>问题 1：字体复合属性的属性名是什么？</p> <ul><li><code>font</code></li></ul></li> <li><p>问题 2：复合属性的作用是什么？</p> <ul><li>节约代码</li></ul></li> <li><p>问题 3：复合属性的编写顺序是什么？能够随意调整顺序吗？</p> <ul><li><code>font: font-style font-weight font-size/line-height font-family</code>;</li> <li>复合属性不能随意调整顺序</li> <li>复合属性至少要保留：<code>font-size</code> 和 <code>font-family</code> 属性，否则设置无效</li></ul></li> <li><p>问题 4：猜一猜在开发中字体的复合属性使用频率高吗？为什么？</p> <ul><li>不高</li> <li><code>font-family</code> 通常会在 <code>body</code> 的标签选择器中定义，其他位置通常不需要更改字体</li></ul></li></ul> <h3 id="_3-6-字体属性总结-四-03-03"><a href="#_3-6-字体属性总结-四-03-03" class="header-anchor">#</a> 3.6 字体属性总结（四 ~ 03'03''）</h3> <table><thead><tr><th>属性</th> <th>含义</th> <th>注意事项</th></tr></thead> <tbody><tr><td>font-size</td> <td>字号</td> <td>但是通常是 px（像素），一定要有单位</td></tr> <tr><td>font-family</td> <td>字体</td> <td>工作中按照团队约定即可</td></tr> <tr><td>font-weight</td> <td>字重</td> <td>700 加粗 / 400 普通 不带单位</td></tr> <tr><td>font-style</td> <td>字体样式</td> <td><code>italic</code> 斜体 / <code>normal</code> 正常，把 <code>em</code> 改成不倾斜</td></tr> <tr><td>font</td> <td>连写</td> <td><code>font-style font-weight font-size/line-height font-family</code></td></tr></tbody></table> <h2 id="_4☆-文本属性"><a href="#_4☆-文本属性" class="header-anchor">#</a> 4☆. 文本属性</h2> <h3 id="_4-1-文本颜色-color-四-05-55"><a href="#_4-1-文本颜色-color-四-05-55" class="header-anchor">#</a> 4.1 文本颜色 color（四 ~ 05'55''）</h3> <h4 id="_4-1-1-「文本颜色-color」问题"><a href="#_4-1-1-「文本颜色-color」问题" class="header-anchor">#</a> 4.1.1 「文本颜色 color」问题</h4> <ul><li>问题 1：文本属性可以定义哪些样式？</li> <li>问题 2：有几种定义颜色的方式？在开发中哪种颜色最常用？</li></ul> <h4 id="_4-1-2-「文本颜色-color」答案"><a href="#_4-1-2-「文本颜色-color」答案" class="header-anchor">#</a> 4.1.2 「文本颜色 color」答案</h4> <ul><li><p>问题 1：文本属性可以定义哪些样式？</p> <ul><li>文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等</li></ul></li> <li><p>问题 2：有几种定义颜色的方式？在开发中哪种颜色最常用？</p> <ul><li>预定义的颜色名：<code>red</code>、<code>green</code>、<code>blue</code></li> <li>十六进制：<code>#ff0000</code></li> <li>RGB 代码：<code>rgb(255, 0, 0)</code> 或 <code>rgba(255, 0, 0, 0.5)</code></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>开发中最常用的是：十六进制的颜色</li></ul></div> <ul><li><p>如果要使用透明色，可以使用 <code>rgba(red, green, blue, 透明度)</code>，其中：</p> <ul><li><code>red</code>：<code>0 ~ 255</code></li> <li><code>green</code>：<code>0 ~ 255</code></li> <li><code>blue</code>：<code>0 ~ 255</code></li> <li>透明度：<code>0 ~ 1</code>，<code>0</code> 表示完全透明（看不见），<code>1</code> 表示完全不透明</li></ul></li></ul> <h3 id="_4-2-文本对齐-text-align-四-03-05"><a href="#_4-2-文本对齐-text-align-四-03-05" class="header-anchor">#</a> 4.2 文本对齐 text-align（四 ~ 03'05''）</h3> <h4 id="_4-2-1-「文本对齐-text-align」问题"><a href="#_4-2-1-「文本对齐-text-align」问题" class="header-anchor">#</a> 4.2.1 「文本对齐 text-align」问题</h4> <ul><li>问题 1：<code>text-align</code> 能设置哪个方向上的文本对齐方式？</li> <li>问题 2：有哪三种种文本对齐方式？</li> <li>问题 3：文本对齐的本质是什么？</li></ul> <h4 id="_4-2-2-「文本对齐-text-align」答案"><a href="#_4-2-2-「文本对齐-text-align」答案" class="header-anchor">#</a> 4.2.2 「文本对齐 text-align」答案</h4> <ul><li><p>问题 1：<code>text-align</code> 能设置哪个方向上的文本对齐方式？</p> <ul><li>可以设置水平方向上的对齐方式</li></ul></li> <li><p>问题 2：有哪三种种文本对齐方式？</p> <ul><li><code>left</code>：左对齐（默认）</li> <li><code>right</code>：右对齐</li> <li><code>center</code>：居中</li></ul></li> <li><p>问题 3：文本对齐的本质是什么？</p> <ul><li>盒子让内部的文本按照盒子边界对齐</li></ul></li></ul> <h4 id="_4-2-2-「文本对齐-text-align」练习-05-00"><a href="#_4-2-2-「文本对齐-text-align」练习-05-00" class="header-anchor">#</a> 4.2.2 「文本对齐 text-align」练习（05'00'')</h4> <ol><li>给同学演示用 Chrome 调试工具设置文本对齐方式；</li> <li>让同学自行练习，体会文本对齐，是<strong>盒子让内部的文本按照盒子边界对齐</strong>，样式是设置在盒子上的。</li></ol> <h3 id="_4-3-文本装饰-text-decoration-四-05-04"><a href="#_4-3-文本装饰-text-decoration-四-05-04" class="header-anchor">#</a> 4.3 文本装饰 text-decoration（四 ~ 05'04''）</h3> <h4 id="_4-3-1-「文本装饰-text-decoration」问题"><a href="#_4-3-1-「文本装饰-text-decoration」问题" class="header-anchor">#</a> 4.3.1 「文本装饰 text-decoration」问题</h4> <ul><li>问题 1：视频中 <code>text-decoration</code> 能够给文本增加哪些装饰？</li> <li>问题 2：如何取消 <code>a</code> 标签默认的下划线？</li></ul> <h4 id="_4-3-2-「文本装饰-text-decoration」答案"><a href="#_4-3-2-「文本装饰-text-decoration」答案" class="header-anchor">#</a> 4.3.2 「文本装饰 text-decoration」答案</h4> <ul><li><p>问题 1：视频中 <code>text-decoration</code> 能够给文本增加哪些装饰？</p> <table><thead><tr><th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>none</td> <td>默认，没有装饰线，最常用</td></tr> <tr><td>underline</td> <td>下划线，常用</td></tr> <tr><td>line-through</td> <td>删除线，不常用</td></tr> <tr><td>overline</td> <td>上划线，几乎不用</td></tr></tbody></table></li> <li><p>问题 2：如何取消 <code>a</code> 标签默认的下划线？</p> <p><code>text-decoration: none;</code></p></li></ul> <h4 id="_4-3-3-「文本装饰-text-decoration」练习-05-00"><a href="#_4-3-3-「文本装饰-text-decoration」练习-05-00" class="header-anchor">#</a> 4.3.3 「文本装饰 text-decoration」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习<strong>text-decoration</strong></li> <li>练习步骤：
<ol><li>新建文件 <code>文本装饰.html</code>；</li> <li>添加三个 a 标签，取消所有 a 标签的下划线。</li></ol></li></ol> <h3 id="_4-4-文本缩进-text-indent-四-05-27"><a href="#_4-4-文本缩进-text-indent-四-05-27" class="header-anchor">#</a> 4.4 文本缩进 text-indent（四 ~ 05'27''）</h3> <h4 id="_4-4-1-「文本缩进-text-indent」问题"><a href="#_4-4-1-「文本缩进-text-indent」问题" class="header-anchor">#</a> 4.4.1 「文本缩进 text-indent」问题</h4> <ul><li>问题 1：<code>text-indent</code> 的作用是什么？</li> <li>问题 2：<code>em</code> 有多大？</li></ul> <h4 id="_4-4-2-「文本缩进-text-indent」答案"><a href="#_4-4-2-「文本缩进-text-indent」答案" class="header-anchor">#</a> 4.4.2 「文本缩进 text-indent」答案</h4> <ul><li><p>问题 1：<code>text-indent</code> 的作用是什么？</p> <ul><li>设置文本段落的首行缩进，更适合中文阅读习惯</li></ul></li> <li><p>问题 2：<code>em</code> 有多大？使用 <code>em</code> 有什么注意事项？</p> <ul><li>当前元素 1 个文字的大小</li></ul></li></ul> <blockquote><p>还记得 <code>&amp;emsp;</code> 吗？</p></blockquote> <h4 id="_4-4-3-「文本缩进-text-indent」练习-05-00"><a href="#_4-4-3-「文本缩进-text-indent」练习-05-00" class="header-anchor">#</a> 4.4.3 「文本缩进 text-indent」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习 <strong>text-indent</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>文本首行缩进.html</code>，并复制素材代码；</li> <li>先在 Chrome 中用调试器设置文本首行缩进；</li> <li>再在 HTML 中增加样式。</li></ol></li> <li><p>素材代码：</p> <div class="language-txt extra-class"><pre class="language-text"><code>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。

可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。

那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？
</code></pre></div></li></ol> <h3 id="_4-5-行间距-line-height-五-08-10"><a href="#_4-5-行间距-line-height-五-08-10" class="header-anchor">#</a> 4.5 行间距 line-height（五 ~ 08'10''）</h3> <h4 id="_4-5-1-「行间距-line-height」问题"><a href="#_4-5-1-「行间距-line-height」问题" class="header-anchor">#</a> 4.5.1 「行间距 line-height」问题</h4> <ul><li>问题 1：<code>line-height</code> 的作用是什么？</li> <li>问题 2：行间距由几个部分组成？分别是什么？</li> <li>问题 3：应该如何测量行间距？为什么？</li></ul> <h4 id="_4-5-2-「行间距-line-height」答案"><a href="#_4-5-2-「行间距-line-height」答案" class="header-anchor">#</a> 4.5.2 「行间距 line-height」答案</h4> <ul><li><p>问题 1：<code>line-height</code> 的作用是什么？</p> <ul><li>控制文本行与行之间的距离</li> <li>文本在盒子中垂直居中（后面会讲）</li></ul></li> <li><p>问题 2：行间距由几个部分组成？分别是什么？</p> <ul><li>上间距</li> <li>文本高度</li> <li>下间距</li></ul></li> <li><p>问题 3：应该如何测量行间距？为什么？</p> <ul><li>从一段文字的下边线测量到相邻行的上间距</li> <li>因为文本的上下间距是相等的</li></ul></li></ul> <h3 id="_4-6-css-文本属性总结-五-02-58"><a href="#_4-6-css-文本属性总结-五-02-58" class="header-anchor">#</a> 4.6 CSS 文本属性总结（五 ~ 02'58''）</h3> <table><thead><tr><th>属性</th> <th>含义</th> <th>注意事项</th></tr></thead> <tbody><tr><td>color</td> <td>颜色</td> <td><code>#fff</code> / <code>rgba(r, g, b, 透明度)</code></td></tr> <tr><td>text-align</td> <td>对齐</td> <td><code>left</code> / <code>right</code> / <code>center</code></td></tr> <tr><td>text-indent</td> <td>首行缩进</td> <td><code>text-indent: 2em;</code></td></tr> <tr><td>text-decoration</td> <td>文本修饰</td> <td><code>text-decoration: underline;</code> / <code>text-decoration: none;</code></td></tr> <tr><td>line-height</td> <td>行高</td> <td>行高等于盒子高度会垂直居中</td></tr></tbody></table> <h2 id="_5☆-css-的三种引入方式-认知类"><a href="#_5☆-css-的三种引入方式-认知类" class="header-anchor">#</a> 5☆. CSS 的三种引入方式（认知类）</h2> <h3 id="_5-1-内部样式表-五-04-25"><a href="#_5-1-内部样式表-五-04-25" class="header-anchor">#</a> 5.1 内部样式表（五 ~ 04'25''）</h3> <h4 id="_5-1-1-「内部样式表」问题"><a href="#_5-1-1-「内部样式表」问题" class="header-anchor">#</a> 5.1.1 「内部样式表」问题</h4> <ul><li>问题 1：按照书写方式，CSS 可以分成几种方式？分别是什么？</li> <li>问题 2：内部样式表可以放在 HTML 的什么位置？默认会放在哪里？</li></ul> <h4 id="_5-1-2-「内部样式表」答案"><a href="#_5-1-2-「内部样式表」答案" class="header-anchor">#</a> 5.1.2 「内部样式表」答案</h4> <ul><li><p>问题 1：按照书写方式，CSS 可以分成几种方式？分别是什么？</p> <ul><li>行内样式表（行内式）</li> <li>内部样式表（嵌入式）</li> <li>外部样式表（链接式）</li></ul></li> <li><p>问题 2：内部样式表可以放在 HTML 的什么位置？推荐会放在哪里？</p> <ul><li>理论上可以放在 HTML 的任何位置</li> <li>推荐放在 <code>head</code> 标签中，<strong>不要忘记还有一个 <code>style</code> 标签哦</strong></li></ul></li></ul> <h3 id="_5-2-行内样式表-五-04-04"><a href="#_5-2-行内样式表-五-04-04" class="header-anchor">#</a> 5.2 行内样式表（五 ~ 04'04''）</h3> <h4 id="_5-2-1-「行内样式表」问题"><a href="#_5-2-1-「行内样式表」问题" class="header-anchor">#</a> 5.2.1 「行内样式表」问题</h4> <ul><li>问题 1：行内样式表有什么特点？</li> <li>问题 2：开发时推荐使用行内样式吗？为什么？</li> <li>问题 3：开发时什么时候会使用行内样式？</li></ul> <h4 id="_5-2-2-「行内样式表」答案"><a href="#_5-2-2-「行内样式表」答案" class="header-anchor">#</a> 5.2.2 「行内样式表」答案</h4> <ul><li><p>问题 1：行内样式表有什么特点？</p> <ul><li>写在元素的 <code>style</code> 属性中</li> <li>适合于简单、快速、临时修改样式</li> <li>在 <code>style</code> 属性中，使用键值对设置样式，不需要 <code>{}</code></li> <li>写在哪个元素就控制哪个元素，对其他元素没有效果</li></ul></li> <li><p>问题 2：开发时推荐使用行内样式吗？为什么？</p> <ul><li>不推荐</li> <li>书写繁琐，没有体现出结构和样式分离</li> <li>不能做到样式复用</li></ul></li> <li><p>问题 3：开发时什么时候会使用行内样式？</p> <ul><li>临时使用，非正式页面</li></ul></li></ul> <h4 id="_5-2-2-「行内样式表」练习-05-00"><a href="#_5-2-2-「行内样式表」练习-05-00" class="header-anchor">#</a> 5.2.2 「行内样式表」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习<strong>行内样式表</strong></li> <li>练习步骤：
<ol><li>新建文件 <code>行内样式表.html</code>；</li> <li>使用<strong>内部样式</strong>和<strong>行内样式</strong>设置标签相同属性，确认样式的优先级。</li></ol></li></ol> <blockquote><p>练习结论</p></blockquote> <ul><li>行内样式的优先级比内部样式表的优先级高。</li></ul> <h3 id="_5-3-外部样式表-五-05-08"><a href="#_5-3-外部样式表-五-05-08" class="header-anchor">#</a> 5.3 外部样式表（五 ~ 05'08''）</h3> <h4 id="_5-3-1-「外部样式表」问题"><a href="#_5-3-1-「外部样式表」问题" class="header-anchor">#</a> 5.3.1 「外部样式表」问题</h4> <ul><li>问题 1：在实际开发中，哪种样式表的引入方式使用的多？</li> <li>问题 2：外部样式表的使用步骤是什么？</li> <li>问题 3：外部样式表中需要使用 <code>style</code> 标签吗？为什么？</li></ul> <h4 id="_5-3-2-「外部样式表」答案"><a href="#_5-3-2-「外部样式表」答案" class="header-anchor">#</a> 5.3.2 「外部样式表」答案</h4> <ul><li><p>问题 1：在实际开发中，哪种样式表的引入方式使用的多？</p> <ul><li>外部样式表</li> <li>核心思想：CSS 与 HTML 分离</li></ul></li> <li><p>问题 2：外部样式表的使用步骤是什么？</p> <ol><li>新建外部的 <code>CSS</code> 文件并编写样式</li> <li>在 HTML 中使用 <code>link</code> 标签引入外部样式表</li></ol></li> <li><p>问题 3：外部样式表中需要使用 <code>style</code> 标签吗？</p> <ul><li>不需要</li> <li>标签是 HTML 的，CSS 中只有样式</li></ul></li></ul> <h4 id="_5-3-3-「外部样式表」练习-05-00"><a href="#_5-3-3-「外部样式表」练习-05-00" class="header-anchor">#</a> 5.3.3 「外部样式表」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li>练习目标：练习<strong>外部样式表</strong></li> <li>练习步骤：
<ol><li>新建文件 <code>引入外部样式表.html</code> 和 <code>./css/style.css</code>；</li> <li>在 <code>./css/style.css</code> 中定义样式，在 <code>html</code> 中引入样式。</li></ol></li></ol> <h3 id="_5-4-css-引入方式总结-五-02-12"><a href="#_5-4-css-引入方式总结-五-02-12" class="header-anchor">#</a> 5.4 CSS 引入方式总结（五 ~ 02'12''）</h3> <table><thead><tr><th>样式表</th> <th>优点</th> <th>缺点</th> <th>使用频率</th> <th>控制范围</th></tr></thead> <tbody><tr><td>行内</td> <td>书写方便，权重高</td> <td>结构样式混合</td> <td>低</td> <td>控制一个标签</td></tr> <tr><td>内部</td> <td>部分结构和样式分离</td> <td>没有彻底分离</td> <td>较多</td> <td>控制一个页面</td></tr> <tr><td>外部</td> <td>完全结构和样式分离</td> <td>需要 link 引入</td> <td>多</td> <td>可以被多处复用</td></tr></tbody></table> <h2 id="_6-综合案例"><a href="#_6-综合案例" class="header-anchor">#</a> 6. 综合案例</h2> <h3 id="_6-1-chrome-调试工具-五-02-12"><a href="#_6-1-chrome-调试工具-五-02-12" class="header-anchor">#</a> 6.1 Chrome 调试工具（五 ~ 02'12''）</h3> <ul><li>演示如何用 Chrome 取色</li></ul> <h3 id="_6-2-综合案例素材"><a href="#_6-2-综合案例素材" class="header-anchor">#</a> 6.2 综合案例素材</h3> <ol><li><p>HTML 素材</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>北方高温明日达鼎盛 京津冀多地地表温度将超60℃<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    2019-07-03 16:31:47 来源: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>中国天气网<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入查询条件...<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    中国天气网讯
    今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>气温41.4℃！地温66.5！北京强势迎七月首个高温日<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pic<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/pic.jpeg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>明日热度再升级！京津冀携手冲击38℃+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
    明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧
    数据支持/王伟跃 胡啸 审核/刘文静 张方丽）
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>本文来源：中国天气网 责任编辑：刘京_NO5631<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>图片素材，请保存为 <code>./images/pic.jpeg</code></p> <p><img src="/basenode/assets/img/pic.b9880a39.jpeg" alt="第一天案例素材"></p></li></ol> <h3 id="_6-2-综合案例要求"><a href="#_6-2-综合案例要求" class="header-anchor">#</a> 6.2 综合案例要求</h3> <ul><li>使用 Chrome 调试工具取色</li></ul> <h3 id="_6-3-综合案例思考"><a href="#_6-3-综合案例思考" class="header-anchor">#</a> 6.3 综合案例思考</h3> <ul><li>从上到下，从左向右设置样式。</li></ul> <h2 id="_7-附录"><a href="#_7-附录" class="header-anchor">#</a> 7. 附录</h2> <h3 id="类命名规则"><a href="#类命名规则" class="header-anchor">#</a> 类命名规则</h3> <table><thead><tr><th>功能</th> <th>建议命名</th></tr></thead> <tbody><tr><td>头</td> <td>header</td></tr> <tr><td>内容</td> <td>content / container</td></tr> <tr><td>尾</td> <td>footer</td></tr> <tr><td>导航</td> <td>nav</td></tr> <tr><td>侧栏</td> <td>sidebar</td></tr> <tr><td>栏目</td> <td>column</td></tr> <tr><td>页面外围控制整体布局宽度</td> <td>wrapper</td></tr> <tr><td>左右中</td> <td>left right center</td></tr> <tr><td>登录条</td> <td>loginbar</td></tr> <tr><td>标志</td> <td>logo</td></tr> <tr><td>广告</td> <td>banner</td></tr> <tr><td>页面主体</td> <td>main</td></tr> <tr><td>热点</td> <td>hot</td></tr> <tr><td>新闻</td> <td>news</td></tr> <tr><td>下载</td> <td>download</td></tr> <tr><td>子导航</td> <td>subnav</td></tr> <tr><td>菜单</td> <td>menu</td></tr> <tr><td>子菜单</td> <td>submenu</td></tr> <tr><td>搜索</td> <td>search</td></tr> <tr><td>友情链接</td> <td>friendlink</td></tr> <tr><td>页脚</td> <td>footer</td></tr> <tr><td>版权</td> <td>copyright</td></tr> <tr><td>滚动</td> <td>scroll</td></tr> <tr><td>内容</td> <td>content</td></tr> <tr><td>标签页</td> <td>tab</td></tr> <tr><td>文章列表</td> <td>list</td></tr> <tr><td>提示信息</td> <td>msg</td></tr> <tr><td>小技巧</td> <td>tips</td></tr> <tr><td>栏目标题</td> <td>title</td></tr> <tr><td>加入</td> <td>joinus</td></tr> <tr><td>指南</td> <td>guild</td></tr> <tr><td>服务</td> <td>service</td></tr> <tr><td>注册</td> <td>regsiter</td></tr> <tr><td>状态</td> <td>status</td></tr> <tr><td>投票</td> <td>vote</td></tr> <tr><td>合作伙伴</td> <td>partner</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/" class="prev router-link-active">
        CSS 学习
      </a></span> <span class="next"><a href="/basenode/css/day02.html">
        CSS 第 02 天 —— 复合选择器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/9.26864b79.js" defer></script>
  </body>
</html>
